<template>
  <div>
    <div class="title-container">
      <div class="title-text">证件照生成</div>
    </div>
    <el-container>
      <div class="options">
        <div class="beauty">
          <h3>美颜选项：</h3>
          <el-checkbox v-model="uploadData.thinFaceChecked">瘦脸</el-checkbox>
          <el-checkbox v-model="uploadData.bigEyeChecked">大眼</el-checkbox>
          <el-checkbox v-model="uploadData.redMouseChecked">红唇</el-checkbox>
          <el-checkbox v-model="uploadData.whiteChecked">美白</el-checkbox>
        </div>
        <div class="backgroundcolor">
          <h3>颜色选择器: </h3>
          <el-radio v-model="uploadData.color" label="#438EDB">蓝色</el-radio>
          <el-radio v-model="uploadData.color" label="#FF0000">红色</el-radio>
          <el-radio v-model="uploadData.color" label="#FFFFFF">白色</el-radio>
          <div class="colorpicker">
            <el-color-picker v-model="uploadData.color" />
          </div>
        </div>
      </div>
      <el-footer class="uploadPictures">
        <el-upload
          name="upload"
          class="upload-demo"
          drag
          :data="uploadData"
          action="https://mcyhzc.top:8080/api/uploadFacePic/"
          :on-success="handleSuccess"
          multiple
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
        </el-upload>
      </el-footer>
    </el-container>
    <h3>处理后的图片: </h3>
    <div v-for="(item) in form.imgs" :key="item" class="getFacePic">
      <el-image
        style="width: 100px; height: 100px"
        :src="item"
        :fit="fit"
      />
    </div>
  </div>
</template>

<script>
// 组件逻辑
// 此处声明一些响应式状态
export default {
  data() {
    return {
      uploadData: {
        thinFaceChecked: false,
        bigEyeChecked: false,
        redMouseChecked: false,
        whiteChecked: false,
        color: ''
      },
      form: {
        imgs: []
      }
    }
  },
  methods: {
    // 上传成功的回调函数
    handleSuccess(res, file, fileList) {
      this.form.imgs.push('data:image/png;base64,' + res[file.name])
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  &-container {
    font-size: 40px;
    text-align: center;
    margin-top: 50px;
  }
}
.options{
  position: relative;
  top: 20%;
  .beauty{
    position: relative;
    top:50%;
    vertical-align: middle;
  }
  .backgroundcolor{
    position: relative;
    top:50%;
  }
}
.uploadPictures{
  position: relative;
  text-align: center;
}
.getFacePic{
  position: relative;
}
</style>
